<template>
	<view>
		<!-- 导航栏 -->
		<navView  title="采购订单"></navView>

		<view class="mainView">
			<!-- 图表部分 -->
			<view class="topView">
				<view class="topView-chooseTime">
					<chooseTime ref="chooseTimeRef" @curTimeChange="curTimeChange"></chooseTime>
				</view>
				<view class="chartView">
					<au-chartPie :chartPieData="chartPieData"></au-chartPie>
				</view>
			</view>

			<!-- 采购订单列表 -->
			<view class="listView">
				<purchaseOrderCell :list="orderList" @itemClick="itemClick"></purchaseOrderCell>
			</view>
			<u-loadmore :status="loadStatus" />
		</view>
	</view>
</template>

<script>
	import chooseTime from '../../components/chooseTime.vue'
	import purchaseOrderCell from '../../components/purchaseOrderCell.vue'
	import navView from '../../components/navView.vue'
	export default {
		components: {
			purchaseOrderCell,
			chooseTime,
			navView,
		},
		data() {
			return {
				//当前物料
				curMaterial: {},
				//采购订单量饼图数据
				chartPieData: {},
				//采购列表
				orderList: [],
				//数据加载状态
				loadStatus: 'loadmore',
				//物料数据总数量
				total: 0,
				//物料数据当前页码
				curPage: 0,
				pageSize: 10,
			}
		},
		onLoad(option) {
			this.curMaterial = JSON.parse(option.curMaterial);
			this.requestPieData();
			this.requestOrderList(this.curPage);
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			//查询采购订单量饼图数据
			requestPieData() {
				this.$nextTick(function() {
					let params = {
						baseMaterialId: this.curMaterial.baseMaterialPkid,
						dateType: this.$refs.chooseTimeRef.curTimeType,
						time: this.$refs.chooseTimeRef.selectedTime,
					};
					this.$u.api.requestPieData(params).then(res => {
						let data = res;
						// 处理饼图数据
						let pieData = [];
						for (let item of data) {
							let descripetion = item.supplier + ':' + item.buycount + '订单,' + item.ratio +
								'%';
							let newItem = {
								'value': item.buycount,
								'descripetion': descripetion
							}
							pieData.push(newItem)
						}
						this.chartPieData = {
							pieData: pieData
						}
					}).catch(err => {
						console.error(err)
					})
				})
			}, 

			// 请求订单列表
			// currentPage: 请求页码
			requestOrderList(currentPage) {
				let params = {
					baseMaterialId: this.curMaterial.baseMaterialPkid,
					currentPage: currentPage,
					pageSize: this.pageSize
				}
				this.$u.api.requestOrderList(params).then(res => {
					let data = res;
					if (currentPage == 0) {
						this.orderList = data.list;
						this.total = data.pagination.total;
					} else {
						this.orderList = this.orderList.concat(data.list);
					}
					if (this.orderList.length >= this.total) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
				}).catch(err => {
					console.error(err)
				})
			},

			curTimeChange() {
				this.requestPieData()
			},

			loadMore() {
				if (this.orderList.length >= this.total) return;
				this.loadStatus = 'loading';
				this.curPage = ++this.curPage;
				this.requestOrderList(this.curPage);
			},
			
			//cell点击事件
			itemClick(selectedItem) {
				uni.navigateTo({
					url: './materialOrderDetail?material=' + JSON.stringify(selectedItem),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mainView {
		background-color: #F5F5F5;
		padding-bottom: 30rpx;
	}

	/* 图表部分 */
	.topView {
		background-color: #FFFFFF;
		padding: 43rpx 30rpx;
	}

	.chartView {
		margin-top: 30rpx;
	}

	/* 采购订单列表 */
	.listView {
		padding: 0rpx 30rpx;
	}
</style>
